import 'package:flutter/material.dart';

class WrapDemo extends StatelessWidget {
  const WrapDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildSectionTitle('Basic Wrap with Chips'),
        _buildChipWrap(),
        
        const SizedBox(height: 20),
        _buildSectionTitle('Vertical Wrap with Images'),
        SizedBox(
          height: 300,
          child: _buildVerticalImageWrap(),
        ),
        
        const SizedBox(height: 20),
        _buildSectionTitle('Wrap with Different Sizes'),
        _buildMixedSizeWrap(),
        
        const SizedBox(height: 20),
        _buildSectionTitle('Wrap with Alignment'),
        _buildAlignedWrap(),
      ],
    );
  }

  Widget _buildSectionTitle(String title) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Text(
        title,
        style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      ),
    );
  }

  Widget _buildChipWrap() {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Wrap(
        spacing: 8.0,
        runSpacing: 4.0,
        alignment: WrapAlignment.center,
        children: const <Widget>[
          Chip(
            avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('A')),
            label: Text('Hamilton'),
          ),
          Chip(
            avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('M')),
            label: Text('Lafayette'),
          ),
          Chip(
            avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('H')),
            label: Text('Mulligan'),
          ),
          Chip(
            avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
            label: Text('Laurens'),
          ),
          Chip(
            avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('T')),
            label: Text('Washington'),
          ),
          Chip(
            avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('B')),
            label: Text('Franklin'),
          ),
        ],
      ),
    );
  }

  Widget _buildVerticalImageWrap() {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Wrap(
        direction: Axis.vertical,
        spacing: 10,
        runSpacing: 10,
        children: List.generate(8, (index) {
          return Container(
            width: 80,
            height: 80,
            color: Colors.primaries[index % Colors.primaries.length],
            child: Center(
              child: Text(
                'Item ${index + 1}',
                style: const TextStyle(color: Colors.white),
              ),
            ),
          );
        }),
      ),
    );
  }

  Widget _buildMixedSizeWrap() {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Wrap(
        spacing: 10,
        runSpacing: 10,
        children: [
          Container(width: 100, height: 50, color: Colors.red),
          Container(width: 80, height: 80, color: Colors.green),
          Container(width: 120, height: 40, color: Colors.blue),
          Container(width: 70, height: 70, color: Colors.amber),
          Container(width: 90, height: 60, color: Colors.purple),
          Container(width: 50, height: 100, color: Colors.cyan),
        ],
      ),
    );
  }

  Widget _buildAlignedWrap() {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Wrap(
        spacing: 10,
        runSpacing: 10,
        alignment: WrapAlignment.spaceBetween,
        children: List.generate(10, (index) {
          return Container(
            width: 60,
            height: 60,
            color: Colors.accents[index % Colors.accents.length],
            child: Center(
              child: Text(
                (index + 1).toString(),
                style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
            ),
          );
        }),
      ),
    );
  }
}